Chrome Tech Talk Night #4に参加してきました

#イベントレポート

小室啓

2012.10.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Chrome Tech Talk Night

先日Google Chrome Tech talk Night #4に参加してきました。非常に楽しく、刺激的なセッションとLTを見ることができました。自分の知らなかった素晴らしいツールやサイトの紹介もあったので、当日のメモを中心に、ざっとまとめておきます。ニュアンスと意訳で書いてる部分があるので、そんなこと言ってないよ！等ありましたら、ツッコミをお願いします

Session1：モバイルウェブのバリエーションについて

Boris Smus

講演スライドリンク

多種多様なモバイルウェブを対象とするアプリケーション開発で、注意すべき事項や、UIの最適化のための様々な情報を紹介。

スクリーン密度の違いによる最適化について
大きさやプラットフォームの違いによるレイアウトの最適化について
Inputのバリエーションについて

画像の最適化について

同じ大きさで表示する画像において、「ピクセルサイズを落として品質を高めに保つ」よりも、「ピクセルサイズをそのままに品質を低め」に設定した方がきれいに描画される ⇒　large, compressed images
画像をスケーリングするときは、Manualでスケーリングする方が良い
複数の画像を用意して、端末の違いに応じて、最適な画像を用意する ⇒　実現するためのjavascript libraryが豊富にある
Media Queryを使う
image-setを使う。ただし、SafariとChromeだけしか今のところ使えない
src-setを使う。ただし、CSS4なので補完ライブラリを使う srcset-polyfill

Form Factor

プラットフォームの違いよりもバリエーションが豊富(タブレットだったり電話だったり) ⇒　大きさもそうだし、縦横も対応するとバリエーションはさらに膨大に
Responsive Design！　⇒　Demo
MediaQueryでResponsiveな動きを実現しようとすると、少し制限があるので、Javascriptの中でMediaQueryを利用しよう
スマートフォンに適したWebサイト構築。Google Webmaster
クライアントサイドで判定してごにょごにょやるためのライブラリ device.js
サーバーサイドで判定してごにょごにょやるためには。devicedatabaseを使おう！User-Agent文字列を解析して、デバイスの情報を得るみたい。APIが用意されてるものがいくつか
1. DeviceAtlas
2. WURFL

Input Variation

モバイル独自の入力(Touch、ジェスチャ)
Chrome Dev toolにはジェスチャをエミュレートできる機能があるよ
Click, Mouseイベントには、300msの遅延があるのが良く知られてるよ。Touchイベントは遅延なし Faster Buttons
描画のタイミングは、ブラウザに移譲。AnimationFrameを使う
```
window.webkitRequestAnimationFrame
```
MouseとTouch両方使いたい時はどうする？ ⇒ PointerEventを使おう！ PointerEvents w3c Pointer.js
ジェスチャの実装は超大変 ⇒ ライブラリが一杯公開されてるので使おう！ Touch Event Libraries

Session2: ウェブアプリケーション開発のワークフローと Yeoman

Paul Irish

Yeoman というツールの紹介とデモンストレーション。テスト、パッケージ管理やライブラリ管理など、開発が楽に、楽しくなるようなツールが満載でした。基本的にGithubに公開されているものを組み合わせて構成されているようです。ウェブアプリケーションの開発において、非常に強力なツールになりそうです。

終始、「楽しく開発しようぜ！」というメッセージがちらほら見られ、楽しんで開発している様子でした。

Yeomanはこんな要素が含まれているようです

Compass, Sass, Coffeescript
AMD Module support, RequireJS, ECMAScript6 Module experiment
Bootstrap, Stripped HTML5 Boilerplate, Modernizr
Twitter Bower
Mocha, PhantomJS
r.js OptiPNG, jpegtran, confess.js

自分も全て追いきれていないので、初見のものもありました。Webアプリケーション開発の世界は早くてなかなか追いきれません・・・

パッケージ管理

これが非常に強力そうです。yumやapt-getなどのように、インストールしたいjavascriptライブラリをsearchし、インストールすると依存関係を自動的に解決してくれます

Yeoman特徴

Scaffoldをさくっと構築できる (Lightning-fast scaffolding)
編集を即座に反映（Live-recompile, Live-refresh） # 恐らくnode.jsによるpush通信によるものだと思われ
Sass, Coffeescript, AMD & ES6 Modules (Automatically compile CoffeeScript & Compass, Support for ES6 module syntax)
言語チェック (Automatically lint your scripts)
テストは、ブラウザでテスト、PhatomJSによるHeadless(スクリーンがない)テストが可能 (PhantomJS Unit Testing)
画像の最適化 (Awesome Image Optimization)
Clound上のモバイルブラウザのエミュレータによる様々な端末のブラウザのテスト
パッケージ管理によるライブラリのインストール、依存関係を解決 (Integrated package management)